import React, {Component} from 'react';
import {collectList, removeCollect} from "../../api/news";

class Collect extends Component {

    constructor(props) {
        super(props);
        this.state = {
            collectList: [],
        }

    }


    componentDidMount() {

        this.getCollectList();

    }

    getCollectList = async () => {

        let info = await collectList();
        if (info.data.statusCode == 200) {
            let collectList = info.data.data.collectInfo;
            this.setState({
                collectList
            })
        }

        console.log(info, '用户的收藏列表');


    }

    removeCollectNews = async (newsId) => {

        let info = await removeCollect(newsId);

        if(info.data.statusCode == 200){
            alert(info.data.message);
            // 重新加载一下用户的收藏列表
            this.getCollectList();

        }else{
            alert(info.data.message);
            return false;
        }
    }

    render() {
        return (
            <div>
                <h1>展示用户的收藏列表</h1>
                <hr/>
                {
                    this.state.collectList.map(item => {
                        return (
                            <ul key={item._id}>
                                <li>序号：{item._id}</li>
                                <li>
                                    <button onClick={() => {
                                        this.removeCollectNews(item._id)
                                    }}>取消收藏
                                    </button>
                                </li>
                                <li>标题名称：{item.title}</li>
                                <li>浏览次数：{item.viewCount}</li>
                                <li>作者：{item.author}</li>
                                <li>封面图：<img width={100} src={'https://yw.52kfw.cn' + item.imageUrl} alt=""/></li>
                                <hr/>

                            </ul>

                        )
                    })
                }
            </div>
        );
    }
}

export default Collect;
